<!-- 实时水质数据展示 -->
<template>
  <div id="maind">
    <h1 id="titlena">实时水质</h1>
    <div>
      <!-- tab选项栏 -->
      <a-tabs @tab-click="anyData as any">
        <a-tab-pane key="any" title="全部"></a-tab-pane>
        <a-tab-pane key="normal" title="正常"></a-tab-pane>
        <a-tab-pane key="alarm" title="报警"></a-tab-pane>
        <a-tab-pane key="anomaly" title="异常"></a-tab-pane>
        <a-tab-pane key="mark" title="关注"></a-tab-pane>
      </a-tabs>
    </div>
    <div>
      <FlowCard></FlowCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Data } from "@arco-design/web-vue/es/_utils/types";
import { router } from "../../router";
import { userRealTimeData } from "../../store/realTime/realTimeData";
import FlowCard from "./component/QualityCard.vue";
interface Data {
  any: Array<number>;
  normal: Array<number>;
  alarm: Array<number>;
  anomaly: Array<number>;
  mark: Array<number>;
}
let data: Data = {
  any: [0, 1],
  normal: [0.15, 0.25],
  alarm: [0.25, 0.28],
  anomaly: [0.28, 0.35],
  mark: [100],
};
let realData = userRealTimeData();
realData.dataInit(data.any);
let anyData = <T extends keyof Data>(key: T) => {
  realData.qualityInit(data[key]);
  router.push("/RealTimeDta/Quality");
};
</script>

<style scoped>
#titlena {
  color: #4e5969;
  margin: 10px;
  border-left: 5px solid #8dd1ff;
  padding-left: 20px;
}

#maind {
  height: 100%;
  margin-top: 70px;
  text-align: left;
}
</style>
